<template>
    <view class="nav">
        <view @tap="SelectTab(index)" class="nav_item" v-for="(item,index) in nav" :key="index" :class="currentIndex===index ? 'active':''">{{item}}</view>
    </view>
</template>

<script>
export default {
    props:{
        nav:Array,
        initTabIndex:{
            type:Number,
            default:0
        }
    },
    data(){
        return{
            currentIndex:0,
        }
    },
    methods:{
        SelectTab(index){
            this.currentIndex=index;
            this.$emit('tabChange',index);
        },
    },
    mounted(){
        this.currentIndex=this.initTabIndex;
    }
}
</script>

<style lang="less" scoped>
.nav{
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 750rpx;
    height: 88rpx;
    background: #fff;
    .nav_item{
        position: relative;
        color: #999999;
        width: 160rpx;
        text-align: center;
    }
    .active{
      color: #3f3f3f;
      text-align: center;
    }
    .active::before{
      content: '';
      position: absolute;
      top: 65rpx;
      left: -2rpx;
      width: 160rpx;
      height: 2rpx;
      background: red;
    }
  }
</style>